<template>
	<view class="MyOrder">
		<view class="to-nav-main">
			<view class="NavigationBox" v-for="(item,index) in navList" :key="index" @click="selectCurrent(index)">
				<view :class="[current==index?'currentItem':'itemTxt']">{{item.name}}</view>
			</view>
		</view>
		<view class="OrderManagementBox">
			<view class="orderList" v-if="orderList.length>0">
				<view class="orderItem" v-for="(item,index) in orderList" @click="toDetail" :key="index" :data-id="item.id">
					<view class="order_top">
						<view class="orderNameBox">
							<view class="orderImage">
								<image src="/static/mine/order.png" mode=""></image>
							</view>
							<view class="orderName">{{item.name}}</view>
						</view>
						<view class="Write" v-if="item.type==0">待付款</view>
						<view class="Write" v-if="item.type==1">待消费</view>
						<view class="Write" v-if="item.type==2">待评价</view>
						<view class="Write" v-if="item.type==3">已完成</view>
						<view class="Write" v-if="item.type==4">已退款</view>
					</view>
					<view class="orderInfo">
						<view class="infoImage" :style="{'background-image':'url('+getImage(item.shop_package.title_image)+')'}">
							<!-- <image :src="getImage(item.ShopPackage.title_image)" mode=""></image> -->
						</view>
						<view class="info_R">
							<view class="infotext">数量：{{item.num}}</view>
							<view class="infotext">需付款：￥{{item.money}}</view>
							<view class="infotext">下单时间：{{item.create_time|getTime}}</view>
						</view>
					</view>
					<view class="editBox" v-if="item.type==0">
						<view></view>
						<view class="editBtnBox" @click.stop="getPay" :data-id="item.order_number">
							<view class="editBtn">立即付款</view>
						</view>
					</view>
					<view class="editBox" v-if="item.type==1">
						<view></view>
						<view class="editBtnBox">
							<view class="seeBtn" :data-index="index" @click.stop="toRefund">申请退款</view>
							<view class="seeBtn">查看卷码</view>
							<view class="editBtn" :data-index="index" @click.stop="toShopDetail">再来一单</view>
						</view>
					</view>
					<view class="editBox" v-if="item.type==2">
						<view></view>
						<view class="editBtnBox">
							<!-- <view class="seeBtn" :data-index="index" @click.stop="toRefund" v-if="item.is_refund==0&&item.type!=4">申请退款</view>
							<view class="seeBtn" v-if="item.is_refund==1&&item.type!=4">退款审核中</view>
							<view class="seeBtn" v-if="item.type==4">已退款</view> -->
							<view class="seeBtn" :data-index="index" @click.stop="toRelease">体验反馈</view>
							<view class="editBtn" :data-index="index" @click.stop="toShopDetail">再来一单</view>
						</view>
					</view>
					<view class="editBox" v-if="item.type>=3">
						<view></view>
						<view class="editBtnBox">
							<!-- <view class="seeBtn" :data-index="index" @click.stop="toRefund" v-if="item.is_refund==0&&item.type!=4">申请退款</view>
							<view class="seeBtn" v-if="item.is_refund==1&&item.type!=4">退款审核中</view>
							<view class="seeBtn" v-if="item.type==4">已退款</view> -->
							<view class="editBtn" :data-index="index" @click.stop="toShopDetail">再来一单</view>
						</view>
					</view>
				</view>
			</view>
			<view class="emptyBox" v-if="orderList.length==0">
				<u-empty text="订单为空" mode="order" icon-size="200"></u-empty>
			</view>
		</view>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	import {wxPayment,zfbPayment} from "@/utils/app.js";
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		data() {
			return {
				keyword:"",
				navList: [{name: '全部'}, {name: '待付款'}, {name: '待使用'},{name: '待评价'},{name: '已完成'},{name: '退款/售后'}],
				current: 0,
				orderList:[],
				page:1,
				nowId:"",
				submitData:{}
			}
		},
		components:{'number-jpan':numberJpan},
		//搜索
		onNavigationBarSearchInputConfirmed(e){
			console.log(e.text);
		},
		onLoad(options) {
			if(options.index){
				this.current = options.index
			}
			this.getList();
		},
		methods: {
			toRefund(e){
				uni.showModal({
					content:"确定要申请退款吗?",
					success:result=>{
						if(result.confirm){
							let index = e.target.dataset.index || e.currentTarget.dataset.index;
							let obj = {};
              // #ifdef APP
              obj.types = 1;//App退款   微信区别是app还是小程序
              // #endif
              // #ifdef MP-WEIXIN
              obj.types = 0;//小程序退款
              // #endif
							obj.order_number = this.orderList[index].order_number;
              obj.user_id = uni.getStorageSync("userId");
							this.$u.api.shopPackageOrderRefund(obj).then(res=>{
								//console.log(res);
								this.$refs.uToast.show({
									title:"退款成功",
									type:"success",
									duration:2000
								})
								this.page = 1;
								this.getList();
							})
						}
					}
				})
			},
			toRelease(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let orderConData = {};
				orderConData.shop = {};
				orderConData.shop.shop_id = this.orderList[index].Shop.id;
				orderConData.shop.name = this.orderList[index].Shop.name;
				orderConData.shop.id = this.orderList[index].Shop.id;
				orderConData.shop.industry = this.orderList[index].Shop.industry;
				orderConData.group = {};
				orderConData.group = {
					id:1,
					shop_id:this.orderList[index].Shop.id,
					shop_package_id:this.orderList[index].ShopPackage.id,
					Shop:this.orderList[index].Shop,
					ShopPackage:this.orderList[index].ShopPackage
				}
				uni.setStorageSync("orderConData",orderConData)
				uni.navigateTo({
					url:"/pages/pagefour/pages/Release/Release?from=order"
				})
			},
			toShopDetail(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				uni.navigateTo({
					url:"/pages/pagethree/pages/OfferDetails/OfferDetails?id="+this.orderList[index].shop_package_id
				})
			},
			closeChange(e){
				this.submitData.pay_password = e;
				this.submitPay();
			},
			getPay(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let arr = [];
				// #ifdef MP-WEIXIN
				arr = ["微信支付","余额支付"];
				// #endif
				// #ifdef APP
				arr = ["微信支付","余额支付","支付宝支付"];
				// #endif
				uni.showActionSheet({
					itemList:arr,
					success:result=>{
						let obj = {};
						obj.user_id = 	uni.getStorageSync("userId");
						obj.order_number = id;
						if(result.tapIndex==0){
							obj.pay_type = 10;
							// #ifdef APP
							obj.pay_type = 20;
							// #endif
							this.submitData = obj;
							this.submitPay();
						}else if(result.tapIndex==1){
							obj.pay_type = 40;
							this.submitData = obj;
							this.$refs.numberPad.open();
						}else if(result.tapIndex==2){
							obj.pay_type = 30;
							this.submitData = obj;
							this.submitPay();
						}
						
					}
				})
			},
			submitPay(){
				this.$u.api.shopPackageOrderPayOrder(this.submitData).then(res=>{
					//console.log(res)
					if(this.submitData.pay_type==10||this.submitData.pay_type==20){
						wxPayment(res.data).then(res=>{
							this.$refs.uToast.show({
								title:"支付成功",
								type:"success",
								duration:2000
							})
							this.page = 1;
							this.getList();
						});
					}else if(this.submitData.pay_type==30){
						
					}else if(this.submitData.pay_type==40){
						this.$refs.uToast.show({
							title:"支付成功",
							type:"success",
							duration:2000
						})
						this.page = 1;
						this.getList();
					}
				})
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			toDetail(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pagethree/pages/orderDetail/orderDetail?id="+id
				})
			},
			selectCurrent(index){
				this.current = index;
				this.page = 1;
				this.getList();
			},
			getList(){
				let obj = {};
				obj.page = this.page;
				obj.is_business = 0;
				obj.search = this.search;
				obj.end_time = this.end_time;
				// obj.user_id = this.user_id;
				obj.user_id = uni.getStorageSync("userId");;
				obj.shop_package_id = this.shop_package_id;
				// obj.shop_package_id = 1;
				obj.start_time = this.start_time;
				if(this.current!=0){
					if(this.current==5){
						obj.is_refund = 1;
					}else{
						obj.type = Number(this.current) - 1;
					}
				}
				this.$u.api.shopPackageOrderList(obj).then(res=>{
					//console.log(res)
					this.orderList = res.list.data;
				})
			},
		}
	}
</script>

<style scoped lang="less">
.MyOrder{
	background-color: #F3F3F3;
	min-height: 100vh;
	overflow: auto;
	padding-top: 72upx;
	.to-nav-main{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 750upx;
		height: 72upx;
		background: #FFFFFF;
		opacity: 1;
		padding: 0 64upx;
		.NavigationBox{
			// flex: 1;
			.itemTxt{
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 40upx;
				color: #333333;
			}
			.currentItem{
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 40upx;
				color: #FFAC3F;
			}
		}
	}
	.OrderManagementBox{
		padding: 32upx 24upx;
		.orderList{
			.orderItem{
				width: 702upx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 8upx;
				padding: 0 24upx;
				margin-bottom: 16upx;
				.order_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.orderNameBox{
						display: flex;
						align-items: center;
						padding: 24upx 0;
						.orderImage{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 24upx;
							height: 24upx;
							background: #FFAC3F;
							border-radius: 50%;
							opacity: 1;
							image{
								width: 16upx;
								height: 16upx;
							}
						}
						.orderName{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-left: 8upx;
						}
					}
					.Write{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
				.orderInfo{
					display: flex;
					padding-bottom: 16upx;
					border-bottom: 2upx solid #F5F5F5;
					.infoImage{
						width: 96upx;
						height: 96upx;
						border-radius: 8upx;
						// background-color: #F0AD4E;
						overflow: hidden;
						margin-right: 20upx;
						background-position: center;
						background-size: cover;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.info_R{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: calc(100% - 116upx);
						.infotext{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
					}
				}
				.editBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 16upx 0;
					.editBtnBox{
						display: flex;
						align-items: center;
						.seeBtn{
							min-width: 104upx;
							padding: 0 10upx;
							height: 52upx;
							border: 2upx solid #E5E5E5;
							opacity: 1;
							border-radius: 26upx;
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 48upx;
							text-align: center;
							color: #999999;
							margin-right: 16upx;
						}
						.editBtn{
							min-width: 104upx;
							height: 52upx;
							background-color: #FFAC3F;
							opacity: 1;
							border-radius: 26upx;
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 52upx;
							text-align: center;
							color: #fff;
						}
					}
				}
			}
		}
		.emptyBox{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750upx;
			height: 600upx;
		}
	}
}
</style>
